/* 基础样式设置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.loginContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}

.loginBox {
  width: 100%;
  max-width: 420px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
  text-align: center;
}

.loginTitle {
  font-size: 24px;
  color: #333;
  margin-bottom: 30px;
}

/* 表单样式 */
.loginForm {
  margin-bottom: 20px;
}

.formGroup {
  margin-bottom: 20px;
}

.formGroup input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.formGroup input:focus {
  border-color: #4a90e2;
  outline: none;
}

.formOptions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
}

.rememberMe {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
}

.face{
  color: rgb(86, 142, 224);
  cursor: pointer;
}

.rememberMe input {
  margin-right: 5px;
}

.forgotPassword {
  color: #4a90e2;
  text-decoration: none;
}

.loginButton {
  width: 100%;
  padding: 12px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.loginButton:hover {
  background-color: #3a80d2;
}

/* 分隔线样式 */
.loginDivider {
  position: relative;
  margin: 30px 0;
  text-align: center;
}

.loginDivider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #eee;
}

.loginDivider span {
  position: relative;
  background-color: #fff;
  padding: 0 10px;
  color: #999;
  font-size: 14px;
}

/* 第三方登录按钮 */
.thirdPartyLogin {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.wechatLogin, .qqLogin {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.wechatLogin {
  background-color: #07c160;
  color: white;
  margin-right: 10px;
}

.qqLogin {
  background-color: #12b7f5;
  color: white;
}

.wechatLogin:hover, .qqLogin:hover {
  opacity: 0.9;
}

/* 图标样式 */
.wechatIcon, .qqIcon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.wechatIcon {
  background-image: url('data:image/svg+xml;utf8,<svg t="1715008230173" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3983" width="16" height="16"><path d="M692.5 377.5c4.1 0 8.2 0.2 12.3 0.4-21.8-117.2-151.9-209.9-305.7-209.9-169.9 0-307.5 114.7-307.5 255.9 0 82.6 46.6 150.7 124.5 203.5l-31.1 91.6 108.8-53.6c38.9 7.6 70.2 15.4 109.1 15.4 9.8 0 19.4-0.5 29-1.3-6.1-20.5-9.6-42-9.6-64.2 0-134.6 118.2-237.8 270.2-237.8z m-170.8-84.8c23.4 0 38.9 15 38.9 37.8s-15.5 37.8-38.9 37.8c-23.4 0-46.8-15-46.8-37.8 0-22.9 23.4-37.8 46.8-37.8z m-217.6 75.6c-23.4 0-46.9-15-46.9-37.8s23.5-37.8 46.9-37.8c23.4 0 38.9 15 38.9 37.8 0 22.8-15.5 37.8-38.9 37.8z" fill="white" p-id="3984"></path><path d="M948 596.8c0-120.7-124.5-219.5-264.2-219.5-148 0-264.6 98.8-264.6 219.5 0 120.9 116.6 219.5 264.6 219.5 31 0 62-7.8 93-15.4L869 839.5l-23.4-68.9c78-45.7 102.4-106.2 102.4-173.8z m-351.1-38.1c-15.5 0-31.1-15-31.1-30.4 0-15.3 15.6-30.4 31.1-30.4 23.5 0 38.9 15 38.9 30.4 0.1 15.3-15.4 30.4-38.9 30.4z m171.5 0c-15.4 0-30.9-15-30.9-30.4 0-15.3 15.5-30.4 30.9-30.4 23.4 0 38.9 15 38.9 30.4 0.1 15.3-15.4 30.4-38.9 30.4z" fill="white" p-id="3985"></path></svg>');
}

.qqIcon {
  background-image: url('data:image/svg+xml;utf8,<svg t="1715008257682" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5066" width="16" height="16"><path d="M516.5 24.4C234.1 24.4 5.9 252.5 5.9 535c0 282.4 228.1 510.6 510.6 510.6s510.6-228.1 510.6-510.6c0-282.5-228.1-510.6-510.6-510.6z m243.5 636.4c-10.5 9.3-38.5-1.1-60.3-29.1-9.5 25.9-26.1 52.2-52.2 77.2 33.7 11.2 55.7 31.5 55.7 52.9 0 33.7-59.2 59.5-138.3 60.3-2.8 0-5.7 0.1-8.6 0.1-2.2 0-4.4 0-6.6-0.1-0.7 0-1.3 0-2 0-0.7 0-1.3 0-2 0-2.2 0-4.4 0.1-6.6 0.1-2.9 0-5.8 0-8.6-0.1-79-0.7-138.3-26.6-138.3-60.3 0-21.4 22-41.7 55.7-52.9-26.1-24.9-42.7-51.3-52.2-77.2-21.8 28-49.8 38.4-60.3 29.1-13.5-12-6.4-52.9 15.6-91 14.6-25.3 33.1-44.4 47.7-50.5-0.6-3.9-0.9-7.9-0.9-11.9 0-8.9 1.5-17.4 3.7-25.5 0.9-3.3 2-6.6 3.2-9.8 1.9-4.9 4.1-9.7 6.6-14.2 1-1.8 1.9-3.7 3-5.4 10.2-16.2 24.3-29.7 40.9-39.5 0.2-0.1 0.4-0.2 0.6-0.4 1.3-0.8 2.6-1.5 3.9-2.2 3.7-2 7.5-3.8 11.4-5.3 4.2-1.7 8.6-3.1 13.1-4.3 5.2-1.4 10.6-2.4 16.1-3.1 2.8-0.4 5.6-0.6 8.5-0.8 1.5-0.1 2.9-0.2 4.4-0.3 6.5-0.4 13-0.6 19.7-0.3 2 0.1 4 0.2 5.9 0.3 3.8 0.3 7.6 0.7 11.3 1.3 2.2 0.4 4.5 0.8 6.7 1.3 3.9 0.8 7.8 1.9 11.6 3.1 2.3 0.7 4.6 1.5 6.9 2.4 3.9 1.5 7.8 3.1 11.5 5.1 2.3 1.2 4.6 2.4 6.8 3.7 3.8 2.2 7.5 4.7 11 7.4 2.2 1.7 4.3 3.5 6.4 5.4 3.6 3.3 7 6.8 10.2 10.5 1.9 2.2 3.7 4.4 5.4 6.8 2.8 3.9 5.2 7.9 7.4 12.2 1.3 2.6 2.5 5.2 3.6 7.9 1.7 4.3 3.1 8.8 4.1 13.4 0.6 2.7 1.1 5.5 1.5 8.3 0.7 4.7 1 9.4 1 14.3 0 4-0.3 8-0.9 11.9 14.6 6.1 33.1 25.2 47.7 50.5 21.9 38.1 29 79 15.5 91z" fill="white" p-id="5067"></path></svg>');
}

/* 注册链接 */
.registerLink {
  font-size: 14px;
  color: #666;
}

.registerLink a {
  color: #4a90e2;
  text-decoration: none;
  margin-left: 5px;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .loginBox {
    padding: 20px;
  }

  .thirdPartyLogin {
    flex-direction: column;
  }

  .wechatLogin {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .formOptions {
    flex-direction: column;
    align-items: flex-start;
  }

  .forgotPassword {
    margin-top: 10px;
  }
}

@media (max-width: 360px) {
  .loginTitle {
    font-size: 20px;
  }

  .formGroup input {
    padding: 10px 12px;
  }

  .loginButton {
    padding: 10px;
  }
}

/* 错误和成功消息样式 */
.errorMessage {
  background-color: #ffebee;
  color: #d32f2f;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
}

.successMessage {
  background-color: #e8f5e9;
  color: #2e7d32;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
} 